<template>
    <div class="header block">
        <div class="detail">
            <div class="search">
                <el-date-picker
                    v-model="payDateSolt"
                    type="month"
                    class="date-solt"
                    unlink-panels
                    placeholder="选择时间"
                    @change="handleCurrentChange"
                />
                <input
                    type="text"
                    placeholder="请输入人员名称/身份证/手机号"
                    class="input search-input"
                    v-model="searchText"
                    @keydown.enter="search"
                />
                <button class="btn" @click="search">搜索</button>
                <button class="btn-white" @click="onReset">重置</button>
            </div>
        </div>
        <div class="operation">
<!--            <button class="btn-green" @click="onExport" style="width:84px;">-->
<!--                <i class="el-icon el-icon-upload2" />导出-->
<!--            </button>-->
            <export-button type="success" @export="onExport" ></export-button>
        </div>
    </div>
    <div class="container block">
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" /> -->
                <el-table-column prop="date" label="月份" />
                <el-table-column prop="userName" label="用户名" />
                <el-table-column prop="idCardNo" label="身份证" width="180px" />
                <el-table-column
                    prop="sex"
                    label="性别"
                    :formatter="
                    (row:{sex:number}) => (row.sex === 1 ? '女' : '男')
                "
                />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column
                    prop="paymentAmount"
                    label="总发薪金额"
                    :formatter="
                    (row:{paymentAmount:string}) => ('￥' + row.paymentAmount)
                "
                />
                <el-table-column prop="realHairAmount" label="实发金额" :formatter="
                    row => ('￥' + row.realHairAmount)
                "/>
                <el-table-column
                    prop="stopPay"
                    label="已停止发薪"
                    :formatter="
                    (row:{stopPay:string}) => ('￥' + row.stopPay)
                "
                />
                <el-table-column
                    prop="received"
                    label="已领取"
                    :formatter="
                    (row:{received:string}) => ('￥' + row.received)
                "
                />
                <el-table-column
                    prop="unclaimed"
                    label="未领取"
                    :formatter="
                    (row:{unclaimed:string}) => ('￥' + row.unclaimed)
                "
                />
                <el-table-column prop="unclaimed" label="操作">
                    <template #default="scoped">
                        <p
                            class="link"
                            v-if="scoped.row.idCardNo"
                            @click="onShowAll(scoped.row.idCardNo)"
                        >
                            查看所有月份
                        </p>
                        <p class="grey" v-else>暂无操作</p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
    <alert-box
        data-Title="全部月份账单"
        v-if="showAllId"
        @close="showAllId = ''"
    >
        <div style="padding: 0 30px;box-sizing: border-box;">
            <el-table :data="showAllList[showAllPage - 1]">
                <el-table-column prop="date" label="月份" />
                <el-table-column prop="userName" label="用户名" />
                <el-table-column prop="idCardNo" label="身份证" width="180px" />
                <el-table-column
                    prop="paymentAmount"
                    label="总发薪金额"
                    :formatter="
                    (row:{paymentAmount:string}) => ('￥' + row.paymentAmount)
                "
                />
                <el-table-column prop="realHairAmount" label="实发金额" :formatter="
                    row => ('￥' + row.realHairAmount)
                "/>
                <el-table-column
                    prop="stopPay"
                    label="已停止发薪"
                    :formatter="
                    (row:{stopPay:string}) => ('￥' + row.stopPay)
                "
                />
                <el-table-column
                    prop="received"
                    label="已领取"
                    :formatter="
                    (row:{received:string}) => ('￥' + row.received)
                "
                />
                <el-table-column
                    prop="unclaimed"
                    label="未领取"
                    :formatter="
                    (row:{unclaimed:string}) => ('￥' + row.unclaimed)
                "
                />
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="showAllPage"
                layout="total, prev, pager, next, jumper"
                :total="showAllTotal"
            />
        </div>
    </alert-box>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import {
    payrollRecordOwn,
    payrollRecordOwnAll,
    PayrollRecordDto
} from '@/api/pay'
import { payrollRecordOwnExport } from '@/api/export'
import { dateFormat, downLoadFile } from '@/utils/util'
import axios from 'axios'
import AlertBox from '@/components/alert-box.vue'
import store from '@/store/index'
export default defineComponent({
    name: 'PayrollRecordOwn',
    data () {
        return {
            active: '全部',
            total: 0,
            pageSize: 10,
            pageNum: 1,
            tableData: [] as PayrollRecordDto[],
            payDateSolt: '',
            searchValue: '',
            searchText: '',
            selects: [] as string[],
            showAllId: '',
            showAllList: [] as PayrollRecordDto[][],
            showAllPage: 1,
            showAllTotal: 0
        }
    },
    created () {
        this.payDateSolt = dateFormat('YY-mm', new Date())
        this.handleCurrentChange()
    },
    methods: {
        handleCurrentChange () {
            payrollRecordOwn({
                queryMonth: this.payDateSolt
                    ? dateFormat('YY-mm', new Date(this.payDateSolt))
                    : '',
                searchText: this.searchText,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }).then(res => {
                this.total = res.total
                this.tableData = res.list
            })
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.handleCurrentChange()
        },
        async onShowAll (idcard: string) {
            this.showAllId = idcard
            const all = await payrollRecordOwnAll({
                idCardNo: idcard
            })
            const result = []
            for (var i = 0, len = all.list.length; i < len; i += 10) {
                result.push(all.list.slice(i, i + 10))
            }
            console.log(result)
            this.showAllList = result
            this.showAllTotal = all.total
        },
        onReset () {
            this.searchText = ''
            this.payDateSolt = dateFormat('YY-mm', new Date())
            this.search()
        },
        async onExport () {
            if (!this.payDateSolt) {
                ElMessage.error('请选择时间')
                return
            }
            const result = await payrollRecordOwnExport({
                queryMonth: this.payDateSolt
                    ? dateFormat('YY-mm', new Date(this.payDateSolt))
                    : '',
                searchText: this.searchText
            }, {
                loading: true
            })
            console.log(result)
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
            // window.location.href =
            //     process.env.VUE_APP_BASE_URL +
            //     '/common/download?delete=true&fileName=' +
            //     result
            // this.$message.success('导出成功！')
        },
        handleSelectionChange (
            selects: {
                id: string
            }[]
        ) {
            this.selects = selects.map(item => item.id)
            console.log(this.selects)
        }
    },
    components: { AlertBox }
})
</script>

<style lang="stylus" scoped>
table()
.header.block
    justify-content space-between
    display flex
    padding 10px 24px
.block
    padding: 10px 24px 0;
:deep().date-solt
    width 241px
    margin-right 20px
.operation
    .btn,.btn-green
        width 113px
        height 40px
        margin-left 20px

:deep().el-tabs__header.is-top
    display inline-block
:deep().el-tabs__nav-scroll
    padding-right 20px
</style>
